<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/ui-base.css">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/cookie.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .wrap {
            width: 1140px;
            margin: 0 auto;
            margin-top: 100px;
            position: relative;
            overflow: hidden;
            height: 600px;
        }

        .wrapBox {
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }

        .wrapBox img {
            width: 100%;
            height: 100%;
        }

        .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.6);
            position: absolute;
            left: 0;
            top: 0;

            display: none;
        }

        .showBigImg {
            width: 400px;
            height: 400px;
            float: left;
            background-color: #0000004d;
            overflow: hidden;
            position: absolute;
            left: 500px;
            top: 0;

            display: none;

        }

        .showBigImg img {
            position: absolute;
            /* z-index: -1; */
            width: 800px;
            height: 800px;
        }

        .switchList {
            width: 400px;
            margin-top: 20px;
            display: flex;
        }

        .switchList li {
            flex: 1;
            margin: 5px;
            border: 1px solid transparent;
        }

        .switchList .active {
            border-color: red;
        }

        .switchList li img {
            width: 100%;
        }

        .wrap .left {
            float: left;
        }

        .wrap .right {
            float: left;
            /* overflow: hidden; */
            width: 640px;
            margin-left: 100px;
            background-color: #6ff;
            min-height: 400px;
        }

        .wrap .right h2 {
            font-size: 18px;
            margin-bottom: 20px;
        }

        .wrap .right>div {
            margin-bottom: 20px;
        }

        .detailBox {
            width: 1140px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="./login.html">你好,请登录</a>
        <a href="./register.html">注册</a>
    </div>
    <div class="wrap">
        <div class="left">
            <!-- <div class="wrapBox">
                <div class="shadow"></div>
                <img class="small" src="../images/girlbig1.jpg" alt="">
            </div>
            <ul class="switchList">
                <li class="active"><img src="../images/girlbig1.jpg" bigImg="../images/girlbig1.jpg" alt=""></li>
                <li><img src="../images/girlbig2.jpg" bigImg="../images/girlbig2.jpg" alt=""></li>
                <li><img src="../images/girlbig3.jpg" bigImg="../images/girlbig3.jpg" alt=""></li>
                <li><img src="../images/girlbig4.jpg" bigImg="../images/girlbig4.jpg" alt=""></li>
            </ul>
            <div class="showBigImg">
                <img class="bigImg" src="../images/girlbig1.jpg" alt="">
            </div> -->
        </div>
        <div class="right">
            <!-- <h2>Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待</h2>
            <div class="price">
                京 东 价:￥ <span>4999.00</span> 降价通知
            </div>
            <div class="buyNum">
                <span class="reduce">-</span>
                <input type="number" value="1">
                <span class="add">+</span>
            </div>
            <button class="addToCar">
                加入购物车
            </button> -->
        </div>
    </div>
    <div class="detailBox">

    </div>
</body>
<script>
    var cookie = document.cookie;
    if (cookie) {  // 标识用户身份
        var user = getCookie("lgc");
        if (user) {
            $(".box").html(`欢迎您,${user} <button onclick="exit()">退出</button>`);
        }
    }


    var search = location.search;
    if (search) {
        var gid = search.split("=")[1];
        console.log(gid);

        searchGoodsById({ gid }).then(res => {
            console.log(res);
            var { status, data: { id, goodsId, goodsName, goodsPrice, smallPicList, bigPicList } } = res;
            if (status) {

                /* 
                      ${smallPicList.map((item, index) => `<li class="${index == 0 ? 'active' : ''}"><img src="${item}" bigImg="${item}" alt=""></li>`).join("")}
                */

                var leftHTML = ` <div class="wrapBox">
                        <div class="shadow"></div>
                        <img class="smallImg" src="${bigPicList[0]}" alt="">
                    </div>
                    <ul class="switchList">
                   
                    </ul>
                    <div class="showBigImg">
                        <img class="bigImg" src="${bigPicList[0]}" alt="">
                    </div>`

                $(".left").html(leftHTML);

                var listHTML = "";
                bigPicList.slice(0, 5).forEach((item, index) => {
                    listHTML += `<li class="${index == 0 ? 'active' : ''}"><img src="${smallPicList[index]}" bigImg="${item}" alt=""></li>`
                })
                $(".switchList").html(listHTML);


                var rightHTML = ` <h2>${goodsName}</h2>
                            <div class="price">
                                京 东 价:￥ <span>${goodsPrice}</span> 降价通知
                            </div>
                            <div class="buyNum">
                                <span class="reduce">-</span>
                                <input class="count-input" type="number" value="1">
                                <span class="add">+</span>
                            </div>
                            <button class="addToCar">
                                加入购物车
                            </button>`
                $(".right").html(rightHTML);







            } else {
                location.href = "./index1.html";
            }

        })



    } else {   //不传参  就回主页
        location.href = "./index1.html";
    }

    $(document).on("click", ".switchList li", function () {
        console.log(this);
        $(this).addClass("active").siblings().removeClass("active");
        var url = $(this).find("img").attr("bigImg");

        $(".smallImg,.bigImg").attr("src", url);
    })
    $(document).on("click", ".addToCar", function () {
        // 加入购物车
        // 谁?  买了什么东西? 买了多少件

        // 谁?  当前登录的用户
        // 买了什么东西?  gid
        // 买了多少件    购买数量
        var user = getCookie("lgc");
        var buyNum = $(".count-input").val() * 1;
        // console.log("加入购物车", user);

        if (user) { // 存在 登录的用户

            addToShoppingCar({ user, gid, buyNum }).then(res => {
                console.log(res);
                var { status } = res;
                if (status) {
                    if (confirm("购买成功,是否进入购物车?")) {
                        location.href = "./shoppingCar.html";
                    }
                } else {
                    alert("商品加入失败");
                }
            })

        } else {  //不存在 => 没有登录  => 跳转登录 
            // 问题  登录成功 => 进入首页 (向返回当前页)
            // 怎么处理??  将当前url地址作为数据拼接到登录页之后  用于以后返回
            // encodeURIComponent()  为了不让别人直接看到url  优化处理
            location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
        }
    })



    function exit() {
        delCookie("lgc");
        location.reload();
    }

</script>

</html>